<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.father {
				/* position: relative; */
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin: 150px;
			}

			.son {
				width: 100px;
				height: 100px;
				background-color: purple;
				margin-left: 40px;
			}

			.test {
				width: 200px;
				height: 200px;
				background-color: sandybrown;
				margin: 0 200px auto;
				padding: 20px;
				border: 5px solid red;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">

			</div>
		</div>
		<div class="test">

		</div>
		<script type="text/javascript">
			// offset 系列
			var father = document.querySelector(".father");
			var son = document.querySelector(".son");
			//1.可以得到元素的偏移,返回不带单位的数值
			console.log(father.offsetTop);
			console.log(father.offsetLeft);
			//它以带有定位得到父亲为准,如果父亲或者父亲没有定位,则以body为准
			console.log(son.offsetTop);
			console.log(son.offsetLeft);

			var test = document.querySelector(".test");
			//2.获取元素的大小,宽度和高度 包含padding+border+width
			console.log(test.offsetWidth);
			console.log(test.offsetHeight);
			
			//3.返回带有定位的父亲,否则返回<body>
			console.log(son.offsetParent);
			console.log(son.parentNode);	//返回父亲,是最近一级的父亲,不管父亲有没有定位
		</script>
	</body>
</html>
